<template>
  <div class="order-delivery">
    <div class="delivery-box">
      <el-form label-position="left" label-width="100px">
        <el-row :gutter="5">
          <el-col :span="16">
            <el-form-item label="快递单号：">
              <el-input v-model="submitForm.deliveryNumber" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="物流公司：">
              <el-select v-model="submitForm.companyCode" placeholder="请选择物流公司">
                <el-option label="全部" value></el-option>
                <el-option
                  v-for="(item, key, index) in DELIVERY_CODE"
                  :key="index"
                  :label="item"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btn-group">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">发货</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "order-delivery",
  components: {},
  props: {
    orderId: {
      type: Number
    },
    oldStatus: {
      type: Number
    }
  },
  data() {
    return {
      DELIVERY_CODE: this.$common.DELIVERY_CODE,
      orderDetail: {},
      submitForm: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    submit() {
      if (this.orderDetail.status !== this.oldStatus) {
        this.$message.error("订单状态已更新，请刷新页面");
        return;
      }
      this.$api.order
        .upsertDelivery({ orderId: this.orderId, ...this.submitForm })
        .then(res => {
          this.$message.success("订单发货成功！");
          this.$emit("refreshDetail");
          this.close();
        });
    },
    close() {
      // 关闭表单弹框
      this.$emit("close");
    },
    getOrderDetail() {
      this.$api.order.getOrderDetail({ orderId: this.orderId }).then(res => {
        this.orderDetail = res.data.orderDetail;
      });
    }
  },
  created() {
    this.getOrderDetail();
  }
};
</script>

<style lang="scss" scoped>
.order-delivery {
  .btn-group {
    text-align: center;
    margin-top: 30px;
  }
}
</style>